<!--  -->
<template>
  <div class="tx-player-box">
    <video
      class="tx-player"
      :id="'player-container' + liveId"
      preload="auto"
      muted="muted"
      playsinline
      webkit-playinline
      x5-playinline
    >
    </video>
    <div class="pause-tips pointer" v-if="isPause" @click.stop="canPlayer">
    </div>
  </div>
</template>

<script>
import LivePoster from "@/assets/images/live-poster.png"

export default {
  props:{
    info: {
      type: Object,
      default: () => ({}),
    },
    liveId: {
      type: [String,Number],
      default: () => ({}),
    },
  },
  data () {
    return {
      player:null,
      isPause:false,
      icon:LivePoster
    }
  },
  mounted () {
    let src = this.info.flv;
    this.$nextTick(() => {
      this.initPlayer(src);
    });
  },
  destroyed() {
    this.clearVideoCache();
  },
  methods:{
    // 初始化播放器
    initPlayer(src) {
      let dom = document.getElementById("player-container" + this.liveId);
      while (dom?.hasChildNodes()) {
        // 当存在子节点时 销毁视频
        clearVideoCache();
      }
      // 初始化
      this.player = TCPlayer("player-container" + this.liveId, {
        muted: true,
        poster: this.icon,
        autoplay: false,
        ContinuePlay: {
          auto: true, //是否在播放时自动续播
          text: "String", // 提示文案
          btnText: "String", // 按钮文案
        },
        controlBar:{
          progressControl:false, // 是否显示播放进度条
          playbackRateMenuButton:false, // 是否显示播放速率选择按钮
          QualitySwitcherMenuButton:false, // 是否显示清晰度切换菜单
          currentTimeDisplay:false, // 是否显示视频当前时间
          timeDivider:false, // 是否显示时间分割符
          durationDisplay:false // 是否显示视频时长
        }
      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
      this.player.src(src || ''); // url 播放地址
      // 自动播放
      this.player.play();
      this.player.on('error', (msg) => {
        // 播放失败，重新连接
        if (msg.type == "error") {
          // setTimeout(() => {
          //   this.player.load(); // 重连
          // }, 4000);
        }
        // 做一些处理
      });
      this.player.on("loadedmetadata", (msg) => {
        console.log(msg, "loadedmetadata");
      });

      this.player.on("play", (msg) => {
        this.isPause = false;
        console.log(msg, "play");
      });
      // 暂停时候触发
      this.player.on("pause", (msg) => {
        this.isPause = true;
        console.log(msg, "pause");
      });
      // 追加截图按钮
      this.insertAdjacentHTML();
    },
    insertAdjacentHTML () {
      let playerBox = document.getElementById("player-container" + this.liveId);
      let fullIcon = playerBox.getElementsByClassName('vjs-fullscreen-control')[0];
      let scanImgIcon = `<button class="vjs-screencapture-control vjs-control vjs-button" type="button" aria-live="polite" title="截图" aria-disabled="false"><span>
              <svg xmlns="http://www.w3.org/2000/svg" id="scan-icon`+this.liveId+`" version="1.1" viewBox="0 0 32 32" style="
              color: #ffffff;
              fill: #fff;
              background-color: transparent;
              width: 23px;
              cursor: pointer;
          "><path d="M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z"></path></svg>
          </span><span class="vjs-control-text">截图</span>
        </button>`
      fullIcon.insertAdjacentHTML('beforebegin',scanImgIcon);
      this.clickCaptureImg();
    },
    // 根据视频截图
    clickCaptureImg () {
      let icon = document.getElementById(`scan-icon${this.liveId}`);
      icon.addEventListener("click",(e) => {
        let videoTag = document.querySelector(`#player-container${this.liveId} video`);
        //TODO: 实际要截图1920*1080尺寸图片
        let canvas = document.createElement('canvas');  // 创建画布
        canvas.width = this.player.videoWidth() > 1920 ? 1920 : this.player.videoWidth();  // 等于视频宽高
        canvas.height = this.player.videoHeight() > 1080 ? 1080 : this.player.videoHeight();
        canvas.getContext('2d')
            .drawImage(
                videoTag,  // 截取的元素
                0, // 被截取图片的裁剪开始位置x坐标
                0,
                canvas.width,  // 被截取图片的裁剪宽度
                canvas.height
            )
        // 转成base64
        canvas.toBlob((e) => {
            let t = URL.createObjectURL(e);
            let a = document.createElement('a');
            a.href = t;
            a.download = 'mv-screen.jpg';
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(t);
        })
      });
    },
    //清除video缓存
    clearVideoCache() {
      if (this.player) {
        this.player?.dispose();
        this.player = null;
      }
    },
    // 暂停后播放
    canPlayer() {
      this.player.play();
    }
  }
}
</script>

<style lang="scss" scoped>
.tx-player-box {
  position: relative;
}
/* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
.tx-player {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25  */
  /deep/ {
    /* 外部容器也需要是自适应的*/
    .tcp-right-click-popup-menu {
      display: none !important;
    }
    .draw-fill {
      display: none !important;
    }
    .vjs-live-control {
      display: none !important;
    }
  }
}


.pause-tips {
  position: absolute;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: url(~@/assets/images/live-pause.png) fixed no-repeat center / cover;
}

</style>
